<template>
  <div class="strategyPage h100">
    <a-tabs
      :active-key="activeKey"
      @change="changeTab"
      class="h100 strategyPageTabs"
      :animated="false"
    >
      <a-tab-pane key="fotaTjcl" :tab="$t('tjcl')" class="h100">
        <fota-condition-index v-if="activeKey === 'fotaTjcl'" ref="fotaConditionCompRef"></fota-condition-index>
      </a-tab-pane>
      <a-tab-pane key="fotaSjcl" :tab="$t('sjcl')" class="h100">
        <fota-update-index v-if="activeKey === 'fotaSjcl'" ref="fotaUpdateCompRef"></fota-update-index>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>
<script>
import FotaConditionIndex from './FotaCondition'
import FotaUpdateIndex from './FotaUpdate'
export default {
  components: {
    FotaConditionIndex,
    FotaUpdateIndex
  },
  data () {
    return {
      activeKey: 'fotaTjcl',
      actions: {
        // 创建升级策略
        csj: {
          method: 'addSjcl'
        },
        // 创建升级策略
        ctj: {
          method: 'addTjcl'
        }
      }
    }
  },
  watch: {
  },
  created() {
    const actionObj = this.actions[this.$route.query.action]
    // 从别的页面跳转过来调用相应的功能
    if (actionObj && actionObj.method) {
      this[actionObj.method]()
    }
  },
  methods: {
    changeTab (key) {
      this.activeKey = key
      this.$store.commit('resetStrategyQueryParams')
    },
    // 通过概览快捷跳转过来创建升级策略
    addSjcl () {
      this.activeKey = 'fotaSjcl'
      this.$nextTick(() => {
        this.$refs.fotaUpdateCompRef.addStrategy()
      })
    },
    // 通过概览快捷跳转过来创建条件策略
    addTjcl () {
      this.activeKey = 'fotaTjcl'
      this.$nextTick(() => {
        this.$refs.fotaConditionCompRef.addStrategy()
      })
    }
  }
}
</script>
<style scoped lang="less">
.strategyPage {
  padding-top: 10px;
}
</style>
<style lang="less">
.strategyPageTabs {
  display: flex;
  flex-direction: column;
  padding: 0 24px;
  .ant-tabs-top-bar {
    flex: none;
  }
  .ant-tabs-content {
    flex: 1 0 0;
    overflow: hidden;
  }
  .ant-tabs-bar {
    .ant-tabs-nav {
      .ant-tabs-tab {
        padding: 12px 0;
        margin: 0 48px 0 0;
      }
    }
  }
  .ant-tabs-ink-bar {
    height: 1px;
  }
}
</style>
